<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.js"></script>
<script type="text/javascript" src="js/jquery.tmplPlus.js"></script>

<script id="accountsTmpl" type="text/html">
    <tr> 
        <td> 
            <span class="username">${username}</span> 
        </td> 
        <td> 
            <span class="login">${email}</span> 
        </td>
    </tr>
</script>

<script id="testTmpl" type="text/html">
    <span class="username">${username}</span>
	<span class="login">${email}</span>
</script>

<script id="quotasTmpl" type="text/html">
	<td> 
		<span class="username">${account.username}</span> 
	</td> 
	<td> 
		<span class="login">${account.email}</span> 
	</td>
	<td> 
		<span class="quota">Vous utilisez actuellement ${used}Mo (${calculatePercent(used, max)}%) de vos ${max}Mo.</span> 
	</td>
</script>

<script id="albumTmpl" type="text/html">
    <div class="albumThumb" albumid="${gphoto$id}" username="julienboz"> 
		<div class="image"> 
			<a href="${localLink}"><img src="${media$group.media$thumbnail.url}" title="${gphoto$name} (${gphoto$user}) , ${gphoto$numphotos} photo(s) - ${gphoto$timestamp}" alt=""></a> 
		</div> 
		<div class="link"> 
			<a href="#">${gphoto$name}</a> 
		</div> 
		<!--<div class="linkPicasa"> 
			<a href="${remoteLink}?locked=true" target="_"><img src="http://www.google.com/intl/nl/options/icons/picasa.gif" alt="Pic" tile="Album Picasa"/></a><a href="${remoteLink}?locked=true#slideshow" target="_"><span class="lhcl_toolbar_text">Diaporama</span></a> 
		</div>--> 
	</div>
</script>

<script type="text/javascript">
	$(document).ready(function() {
		$("#accountsAction").click(function() {
			showAccounts();
		});
		$("#picasaJsonAction").click(function() {
			$.getJSON("http://picasaweb.google.com/data/feed/api/user/julienboz/?kind=album&access=all&alt=json", function(albums) {
				$("#content").empty();
				$("#accountsTmpl").tmpl(albums.entry).appendTo($("#content"));
			});
		});
	});

	function showAccounts() {

		$("#content").fadeOut(500, function() {
			// requete
			$.getJSON("accounts", function(data) {
				// vide le contenu
				$("#content").empty();

				var table = $("<table></table>").attr({
					id : "accountsList",
					cellspacing : 5,
					cellpadding : 5,
					border : 1
				}).appendTo("#content");

				$("#accountsTmpl").tmpl(data).appendTo(table).find(".username").click(function() {
					showQuota($(this), $(this).tmplItem().data);
				});
				$("#content").fadeIn(500).end();
			});
		});
	}

	function calculatePercent(used, size) {
		return used / size * 100;
	}

	function showQuota(elt, account) {
		$.getJSON("accounts/quotas/" + account.id, function(data) {
			var row = elt.parent().parent();
			row.empty();
			$("#quotasTmpl").tmpl(data).appendTo(row);
		});
	}
</script>
</head>
<body>
<div id="actions"><span id="accountsAction">accounts</span>|<span id="picasaJsonAction">Json Picasa</span></div>
<div id="content"></div>
</body>
</html>